<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 09:50:03
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-01-23 18:21:31
 * @FilePath: \partal\src\views\develop\components\GuidePc.vue
 * @Description: 概述-PC端
-->

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { PAGE_DEVELOP_CONTRIBUTE } from '@/enum/pageEnum'
  import { getContribute, getPrimary } from '@/config/contribute'
  import { usePlant } from '@/stores/plant'

  const router = useRouter()
  const plant = usePlant()

  const primaries = getPrimary(plant.plantType)
  const contributes = getContribute(plant.plantType)

  /**
   * 路由跳转：贡献指南
   */
  const goDevelopContribute = () => router.push({ path: PAGE_DEVELOP_CONTRIBUTE })
</script>

<template>
  <div class="pc">
    <p class="p14">SSC+ Design Web</p>
    <p class="p36 mt18">概述</p>

    <p class="p14 mt12">SSC+ Design Web 组件库，适用于 Vue3 技术栈的 Web 应用，开发和服务于企业级后台产品。</p>

    <p class="split mt38" />

    <p class="p24 mt46">特性</p>
    <p class="p14 mt18">1. 50+ 高质量组件，覆盖企业级中后台主流场景</p>
    <p class="p14 mt12">2. 基于 SSC+ Design 视觉规范</p>
    <p class="p14 mt12">3. 支持按需引用</p>
    <p class="p14 mt12">4. 详尽的文档和示例</p>
    <p class="p14 mt12">5. 支持 TypeScript</p>
    <p class="p14 mt12">6. 支持动态定制主题</p>
    <p class="p14 mt12">7. 及时响应，及时更新</p>

    <p class="split mt38" />

    <p class="p24 mt46">贡献</p>
    <p class="p18 mt18">核心成员</p>
    <p class="p14 mt18">以下是 SSC+ Design Web 的核心贡献者们：</p>
    <div class="contribute mt24">
      <div class="contribute-item" v-for="(item, i) in primaries" :key="`contribute-item${i}`">
        <img class="contribute-item-avatar" :src="item.avatar" />
        <span class="contribute-item-name">{{ item.name }}</span>
        <span class="contribute-item-dept">{{ item.dept }}</span>
      </div>
    </div>
    <p class="p18 mt38">贡献成员</p>
    <p class="p14 mt18">感谢以下所有给 SSC+ Design Web 贡献过代码的开发者：</p>
    <div class="contribute mt24">
      <div class="contribute-item" v-for="(item, i) in contributes" :key="`contribute-item${i}`">
        <img class="contribute-item-avatar" :src="item.avatar" />
        <span class="contribute-item-name">{{ item.name }}</span>
        <span class="contribute-item-dept">{{ item.dept }}</span>
      </div>
    </div>
    <p class="p18 mt38">共建指南</p>
    <p class="p14 mt18">非常欢迎开发者为 SSC+ Design Web 贡献代码，在贡献之前请先阅读 <span class="blue" @click="goDevelopContribute()">贡献指南</span>，参与共建提 PR。</p>
  </div>
</template>

<style type="less" scoped>
  .pc {
    width: 988px;
    margin: auto;
    padding-bottom: 108px;
    .blue {
      color: #1677FF;
      cursor: pointer;
    }

    .contribute {
      display: flex;
      flex-wrap: wrap;
      > .contribute-item {
        position: relative;
        width: 180px;
        height: 56px;
        margin-bottom: 24px;
        > .contribute-item-avatar {
          position: absolute;
          top: 0;
          left: 0;
          width: 56px;
          height: 56px;
          object-fit: cover;
          border-radius: 50%;
        }
        > .contribute-item-name {
          position: absolute;
          top: 2px;
          left: 68px;
          height: 24px;
          line-height: 24px;
          font-size: 16px;
          color: #1D2129;
        }
        > .contribute-item-dept {
          position: absolute;
          top: 34px;
          left: 60px;
          padding: 0 8px;
          height: 20px;
          line-height: 20px;
          border-radius: 10px;
          font-size: 12px;
          color: #595959;
          background: #F2F3F5;
        }
      }
    }
  }
</style>
